<template>
  <view>
    <view class="cu-custom" :style="placeholderHeight">
      <view
        class="cu-bar u-flex u-row-between"
        :class="{ fixed: isFixed }"
        :style="[style]"
      >
        <view class="action u-flex" @tap="goBack" v-if="isBack">
          <view
            class="u-iconfont"
            :class="'uicon-' + backIconName"
            :style="{ color: backIconColor, fontSize: backIconSize + 'rpx' }"
          ></view>
          <view
            class="u-back-text u-line-1 u-m-l-20"
            v-if="backText"
            :style="[backTextStyle]"
            >{{ backText || '' }}</view
          >
        </view>
        <view class="action u-flex" v-else>
          <slot name="left"></slot>
        </view>

        <view
          class="content"
          :style="[{ top: statusBarHeight + 'px', height: heightTitle }]"
          ><slot name="content"></slot
        ></view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * shopro-navbar -自定义标题栏
 * @property {Boolean} isBack = [true] - 是否显示返回按钮
 * @property {Booelan} isFixed = [true] - 是否开启定位
 */
export default {
  name: 'shopro-tabbar',
  data() {
    return {
      systemInfo: uni.getSystemInfoSync(),
      menuButtonInfo: {},
    };
  },
  computed: {
    statusBarHeight() {
      return this.systemInfo.statusBarHeight;
    },
    placeholderHeight() {
      return this.placeholder ? `height: ${this.customBar}px;` : '';
    },
    // tabbar样式
    style() {
      let statusBarHeight = this.systemInfo.statusBarHeight;
      let style = {};
      style.height = `${this.customBar}px`;
      style.paddingTop = `${statusBarHeight}px`;
      style = Object.assign(style, this.background);
      return style;
    },
    // 高度
    customBar() {
      let statusBarHeight = this.systemInfo.statusBarHeight;
      // #ifndef MP
      return this.systemInfo.platform == 'android'
        ? statusBarHeight + 50
        : statusBarHeight + 45;
      // #endif
      // #ifdef MP-WEIXIN
      return this.isHeight
        ? this.menuButtonInfo.bottom + this.menuButtonInfo.top - statusBarHeight
        : this.menuButtonInfo.top + this.menuButtonInfo.height;
      // #endif
      // #ifdef MP-ALIPAY
      return statusBarHeight + this.systemInfo.titleBarHeight;
      // #endif
    },
  },
  props: {
    isBack: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: Boolean,
      default: true,
    },
    isFixed: {
      type: Boolean,
      default: true,
    },
    background: {
      type: Object,
      default() {
        return {
          background: '#ffffff',
        };
      },
    },
    // 返回箭头的颜色
    backIconColor: {
      type: String,
      default: '#606266',
    },
    // 左边返回的图标
    backIconName: {
      type: String,
      default: 'arrow-left',
    },
    // 左边返回图标的大小，rpx
    backIconSize: {
      type: [String, Number],
      default: '44',
    },
    // 返回的文字提示
    backText: {
      type: String,
      default: '',
    },
    heightTitle: {
      type: String,
      default: '60rpx',
    },
    // 返回的文字的 样式
    backTextStyle: {
      type: Object,
      default() {
        return {
          color: '#606266',
        };
      },
    },
    isHeight: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
    this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // #endif
  },
  mounted() {
    // 获取系统状态栏的高度
    this.systemInfo = uni.getSystemInfoSync();
  },
  // updated() {
  //   // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
  //   this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  //   // #endif
  //   this.systemInfo = uni.getSystemInfoSync();
  // },
  methods: {
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.cu-custom {
  width: 100%;
}
.cu-bar {
  width: 100%;
  .content {
    width: 560rpx;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    pointer-events: auto;
  }
}
</style>
